<template>
  <div :opacity="0.1" :style="{backgroundImage: 'url(' + musicPic + ')', backgroundSize:'contain'}">
    <!--    搜索框何搜索-->
    <div class="layui-form-item">
      <div>
        <button id="btn-start-recording" @click="startRecording">语音输入</button>
        <button id="btn-play-recording" @click="getRecording">语音搜索</button>
      </div>
      <div class="layui-input-inline">
        <input v-model="query" v-on:keyup.enter="serachMusic" placeholder="请输入音乐名" autocomplete="off"
               class="layui-input">
      </div>
      <div class="layui-input-inline1">
        <button type="button" class="layui-btn" v-on:click="serachMusic">搜索</button>
      </div>
    </div>

    <div class="musicPic1">
      <img :src="musicPic" class="musicPic"/>
    </div>

    <div class="layui-col-xs4 layui-col-sm4 layui-col-md3 musicListBox">
      <ul>
        <div>
          <li v-for="item in musicList" v-on:click="playMusic(item.id)" class="li">
            <i class="layui-icon layui-icon-play"></i>
            <font color="white" face="微软雅黑">{{ item.name }}</font>
            <hr>
          </li>
        </div>
      </ul>
    </div>

    <div class="layui-row">
      <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-bg12">
        <audio style="width: 90%;margin-left: 50px" ref="audio" :src="musicUrl" controls autoplay loop></audio>
      </div>
    </div>


    <div class="layui-col-xs4 layui-col-sm4 layui-col-md3 layui-col-md-offset1 commentBox">
      <div>
        <fieldset class="a1">
          <legend>热门评论</legend>
          <div>
            <dl v-for="item in hotComments">
              <el-container>
                <el-aside width="120px">
                  <dt>
                    <img :src="item.user.avatarUrl" class="user-img"/>
                    <!--                    <div class="a2">{{item.user.nickname}}</div>-->
                  </dt>
                  <!--                    <el-col :span="6"><div></div></el-col>-->
                  <!--                  <div class="a2">{{item.user.nickname}}</div>-->
                </el-aside>

                <el-main>
                  <!--                    <el-col :span="6"><div></div></el-col>-->
                  <!--                    <el-col :span="18"><div><dd>{{item.content}}</dd></div></el-col>-->
                  <font color="white" face="华文彩云">{{item.user.nickname}}</font>
                  <font color="white" face="黑体">
                    <dd>{{item.content}}</dd>
                  </font>
                </el-main>

              </el-container>
              <hr>

            </dl>
          </div>
        </fieldset>
      </div>
    </div>


  </div>
</template>


<script>
  import axios from 'axios'
  import {Recorder} from '../components/audio/recorder.js'

  var recorder = null

  export default {
    data() {
      return {
        query: '',
        musicList: [],
        musicUrl: '',
        musicPic: '',
        hotComments: [],
        area: 'province',
        recorder: null,
        temp: null
      }
    },
    methods: {
      serachMusic: function () {
        var that = this;
        axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function (response) {
          //console.log(response);
          that.musicList = response.data.result.songs
        }, function (error) {
          console.log(error);
        })
      },
      playMusic: function (musicId) {
        var that = this;
        axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function (response) {
          //console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url;
        }, function (error) {
          console.log(error);
        })
        //获取封面
        axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function (response) {
          //console.log(response.data.songs[0].al.picUrl);
          that.musicPic = response.data.songs[0].al.picUrl
        }, function (error) {
          console.log(error);
        })
        //获取评论
        axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function (response) {
          console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments;
        }, function (error) {
          console.log(error);
        })
      },
      startRecording: function () {
        Recorder.get(function (rec) {
          recorder = rec
          recorder.start()
        })
      },
      stopRecording: function () {
        alert("stop")
        recorder.stop()

      },
      getRecording: function () {
        let audioFile = recorder.getBlob()  //得到需要的pcm文件

        let formData = new FormData()
        formData.append('file', audioFile)

        axios({
          method: 'post',
          url: 'http://127.0.0.1:8100/resolveAudio',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          console.log("语音发送成功")
          this.$message({
            message: '搜索:' + res.data,
            type: 'success'
          });
          this.query = res.data
          this.serachMusic()
        })
        console.log(formData)
      },
      beforeDestroy() {
        if (recorder !== null) {
          recorder.stop()
          recorder = null
        }
      }
    },


  }
</script>

<style scoped>


  .back {
    /*background-color: aliceblue;*/
    opacity: 0.9;
  }

  .musicPic {
    width: 300px;
    border-radius: 80%;
    -webkit-transform: rotate(360deg);
    animation: rotation 15s linear infinite;
    -moz-animation: rotation 15s linear infinite;
    -webkit-animation: rotation 15s linear infinite;
    -o-animation: rotation 15s linear infinite;
    background-color: aqua;
    margin-top: 5%;
  }

  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(360deg);
    }
  }

  .commentBox {
    height: 400px;
    overflow: auto;
    background-color: #545c64;
    float: left;
    width: 100%;
  }

  .musicListBox {
    float: right;
    height: 500px;
    width: 30%;
    overflow: auto;
    background-color: #545c64;
  }

  /*.user-img{*/
  /*  float: left;*/
  /*}*/
  .layui-form-item {
    width: 100%;
    height: 100px;
    background-color: #545c64;
    float: right;
  }

  .layui-input-inline {
    width: 70%;
    height: 50px;
    float: left;
  }

  .layui-input-inline1 {
    width: 30%;
    height: 50px;
    float: left;
  }

  .layui-input {
    margin-left: 95%;
    margin-top: 20px;
  }

  .layui-row {
    float: left;
    background-color: #333333;
    width: 70%;
    height: 100px;
  }

  .li {
    width: 60%;
    height: 70px;
  }

  .musicPic1 {
    width: 70%;
    height: 400px;
    background-color: #333333;
    float: left;
  }

  .musicPic {
    margin-left: 250px;
  }

  .user-img {
    width: 80px;
    height: 80px;
    float: left;
  }

  .el-container {
    height: 100px;
  }

  .el-col {
    height: 50px;
  }

  .a2 {
    height: 30px;
    float: left;
  }

  .layui-btn {
    margin-left: 150px;
    margin-top: 20px;
  }


</style>
